<template>
    <div id="total">
        <div id="app">
            <el-menu class="sidebar" mode="vertical">
                <el-menu-item v-for="(item, index) in items" :key="index" @click="selectItem(index,item.component)">
                    {{ item.name }}
                </el-menu-item>
            </el-menu>

            <div class="content">
                <component :is="selectedComponent"></component>
            </div>
        </div>
    </div>

</template>

<script>
import router from "@/router";
import UploadForm from "@/view/generalPage/uploadForm.vue";
import OperationForm from "@/view/generalPage/operationForm.vue";
import CheckForm from "@/view/managePage/checkForm.vue";
import ResetPassword from "@/view/managePage/resetPassword.vue";
import AddPerson from "@/view/managePage/addPerson.vue";
import GetOwnAll from "@/view/generalPage/getOwnAll.vue";
import AllForm from "@/view/managePage/allForm.vue";
import ShowCharge from "@/view/charge/showCharge.vue";
import YesterdayAllChargeStation from "@/view/charge/yesterdayAllChargeStation.vue";
import ChargingScreen from "@/view/charge/ChargingScreen.vue";

export default {
    name: "managerHome",
    components: {
        OperationForm,
        UploadForm,
        CheckForm,
        ResetPassword,
        AddPerson,
        GetOwnAll,
        AllForm,
        ShowCharge,
      YesterdayAllChargeStation,
      ChargingScreen
    },
    data() {
        return {
            items: [
                {name: '填写表单', component: 'OperationForm'},
                {name: '上传表单', component: 'UploadForm'},
                {name:'我的表单',component: 'GetOwnAll'},
                {name:'全部表单',component: 'AllForm'},
                {name: '审批填表', component: 'CheckForm'},
                {name: '重置密码', component: 'ResetPassword'},
                {name: '添加员工', component: 'AddPerson'},
                {name: '充电情况', component: 'ShowCharge'},
                {name: '昨天充电情况', component: 'YesterdayAllChargeStation'},
                {name: '充电大屏', component: 'ChargingScreen'}
            ],
            selectedComponent: 'OperationForm'
        };
    },
    methods: {
        selectItem(index, component) {
            if (component === 'ChargingScreen') {
                router.push('/' + component)
            }
            // router.push('/' + component)
            this.selectedComponent = component
        },
    },
}
</script>

<style scoped>
#app {
    display: flex;
    justify-content: center; /* 水平居中 */
    width: 1400px;
    height: 100vh;
    /*justify-content: center; !* 水平居中 *!*/
}

.sidebar {
    width: 200px;
}

.content {
    flex-grow: 1;
    padding: 20px;
}
</style>